<template>
	<view>
		<!--主体-->
		<view class="meMain">
	
			<view class="mePosition">
				<view class="meMainBox">


					<!--模板-->
					<view class="meOverBg">
			<view class="meVisitorTitle" style="text-align: center;border:none;padding: 10px 15px 3px 15px;">我的奖励(元)</view>
			<view class="meVisitorTitle" style="text-align: center;padding:0;border:none;font-size: 18px;">23.15</view>
						<view class="meVisitor">
							<view class="meVisitorLt">
								<label class="meVisitorTxt_01">本月(元)：</label>
								<label class="meVisitorTxt_02">0.00</label>
								
							</view>
							<view class="meVisitorLt">
								<label class="meVisitorTxt_01">邀请(人)：</label>
								<label class="meVisitorTxt_02">35</label>
							
							</view>
						</view>
						
					</view>
					<!--模板-->


			
			    <view class="tabs">
					
			        <scroll-view class="scroll-h" >
			            <view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :data-current="index" @click="ontabtap">
			                <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
			            </view>
			        </scroll-view>
					
			     
			        <swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
			            <swiper-item class="swiper-item" >
						 这是内容
			            </swiper-item>
						
						<swiper-item class="swiper-item" >
						 这是内容2
						</swiper-item>

			        </swiper>
					
					
			    </view>



				</view>
			</view>
		</view>
		<!--主体-->

	</view>
</template>

<script>
	export default {
		data() {
			return {
                     tabIndex: 0,
                            tabBars: [{
                                name: '邀请奖励'
                            }, {
                                name: '邀请买手'
                            }],
                        
			}
		},
				onNavigationBarButtonTap(e) {			uni.navigateTo({				url:"rule"			})		},
		onLoad() {

		},
		onShow() {



		},
		methods: {
         panel:function(e){
			this.$data.selectindex=e;
		 },
		           ontabtap(e) {
		                 let index = e.target.dataset.current || e.currentTarget.dataset.current;
		                 this.tabIndex = index;
		             },
		 			
		             ontabchange(e) {
		                 let index = e.target.current || e.detail.current;
		                this.tabIndex = index;
		             }

		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.meMain {
		width: 100%;
		position: relative;
	}

	.meMain>image {
		width: 100%;
		height: 220upx;
		display: block;
	}

	.meMainBox {
		width: 100%;
		margin: 0 auto;
	}

	.mePosition {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.meHead {
		overflow: hidden;
		position: relative;
	}

	.meHeadAvatar {
		float: left;
		width: 19%;
		margin-top: 10upx;
	}

	.meHeadAvatar image {
		width: 110upx;
		height: 110upx;
		display: block;
		border-radius: 50%;
	}

	.meHeadName {
		float: left;
		width: 81%;
		line-height: 120upx;
		color: #FFFFFF;
		font-size: 28upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.meOverBg {
		background: #FFFFFF;
		overflow: hidden;
		border-radius: 12upx;
		margin-top: 30upx;
	}

	.meVisitor {
		display: flex;
		flex-direction: row;
	}

	.meVisitorLt {
		width: 50%;
		text-align: center;
		margin: 30upx 0;
	}

	.meVisitorLt:nth-child(1) {
		border-right: 1px #adadad solid;
	}

	.meVisitorTxt_01 {
		font-size: 28upx;
		color: #666666;
	}

	.meVisitorTxt_01 image {
		width: 35upx;
		height: 35upx;
		vertical-align: middle;
		margin: 0 10upx 4upx 0;
	}

	.meVisitorTxt_02 {
		font-size: 30upx;
	}

	.meVisitorTitle {
		font-size: 28upx;
        border-top: 1px #F5F5F5 solid;
		border-bottom: 1px #F5F5F5 solid;
		padding: 20upx 30upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.meOrderLt {
		width: 100%;
		text-align: center;
		padding: 30upx 0;
		transition: all 0.4s;
	}

	.meOrderLt:active {
		background: #E2E2E2;
	}

    
	  .tabs {
	        flex: 1;
	        flex-direction: column;
	        overflow: hidden;
	        background-color: #ffffff;
	        /* #ifdef MP-ALIPAY || MP-BAIDU */
	        height: 100vh;
	        /* #endif */
	    }
	
	    .scroll-h {
			text-align: center;
	        width: 750rpx;
	        height: 80rpx;
			margin: 0 auto;
			justify-content: space-around;
	        flex-direction: row;
				border-top: 1px #F5F5F5 solid;
	       border-bottom: 1px #F5F5F5 solid;
	    }
	
	    .line-h {
	        height: 1rpx;
	        background-color: #cccccc;
	    }
	
	    .uni-tab-item {
	        /* #ifndef APP-PLUS */
	        display: inline-block;
	        /* #endif */
	        flex-wrap: nowrap;
	        padding-left: 34rpx;
	        padding-right: 34rpx;
			
	    }

	    .uni-tab-item-title {
	        color: #555;
	        font-size: 30rpx;
	        height: 80rpx;
	        line-height: 76rpx;
	        flex-wrap: nowrap;
	        /* #ifndef APP-PLUS */
	        white-space: nowrap;
	        /* #endif */
			display: block;
			height: 100%;
	    }
	
	    .uni-tab-item-title-active {
	        color: #ff8c00;
			  border-bottom: 3px #ff8c00 solid;
			  display: block;
			  height: 100%;
	    }
	
	    .swiper-box {
	        flex: 1;
			text-align: center;
	    }
	
	    .swiper-item {
	        flex: 1;
	        flex-direction: row;
	    }
	
	    .scroll-v {
	        flex: 1;
	        /* #ifndef MP-ALIPAY */
	        flex-direction: column;
	        /* #endif */
	        width: 750rpx;
	    }
</style>
